<!-- 轮播广告 -->
<div class="easyui-layout" data-options="fit:true,border:false">
    <div data-options="region:'north',border:false,height:'auto'" >
        <div class="searchIndex">
            <ul >
                <li>
                    <label>状态:</label>
                    <select class="easyui-combobox" name="orderStatus" data-options="panelHeight:'auto',editable:false,width:100">   
                        <option value="">正常</option>   
                        <option value="0">停用</option>
                    </select> 
                </li>
                <li>
                    <label>关键字:</label>
                    <input class="base-input" name="orderNo" />
                </li>
                <li>
                    <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-searchWin8',plain:true">查询</a>
                </li>
            </ul>
        </div>
    </div>
    <div data-options="region:'center',border:false" >
        <div id="indexButton" style="padding-left:10px;">
            <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-add-win8',plain:true" onClick="$('#addAdDialog').dialog('open');">新增广告</a>
            <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-okWin8',plain:true" onClick="">批量启用</a>
            <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-closeWin8',plain:true" onClick="">批量停用</a>
            <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-removeWin8',plain:true" onClick="">批量删除</a>
        </div>
        <table id="addOrderItem" class="easyui-datagrid" data-options="url:'../../json/replyEdit.asp',toolbar:'#indexButton',rownumbers:true,border:false,fit:true,fitColumns:true,nowrap:false,height:350">
            <thead>
                <tr>
                    <th data-options="field:'ck',checkbox:true"></th>
                    <th data-options="field:'orderNo',width:80,align:'center'">排序</th>
                    <th data-options="field:'adName',width:80,align:'center'">广告名称</th>
                    <th data-options="field:'adPic',width:80,align:'center'">广告图片</th>
                    <th data-options="field:'isJump',width:80,align:'center'">是否跳转</th>
                    <th data-options="field:'authTime',width:80,align:'center'">发布时间</th>
                    <th data-options="field:'status',width:80,align:'center'">状态</th>
                    <th data-options="field:'11',width:80,align:'center',formatter:PageObject.gameUserFormatter">操作</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

<!-- 新增广告 -->
<div id="addAdDialog" class="easyui-dialog" data-options="title:'新增广告',closable:true,closed:true,modal:true,width:950,height:550,buttons:'#addAdDialogBtn'">
    <div class="con_form">
        <ul >
            <li>
                <label>图片:</label>
                <div id="uploader-demo" style="margin-left: 105px">
                    <!--用来存放item-->
                    <div id="fileList" class="uploader-list">
                      <div class="file-item thumbnail">
                        <div class="image">暂无图片</div>
                        <!-- <div class="info">undefined</div> -->
                      </div>
                    </div>
                    <div id="filePicker">上传</div>
                    <!-- <input class="easyui-textbox" name="orgId" id="filePicker" data-options="buttonIcon:'icon-add-win8',buttonText:'选择图片',width:200,editable:false,iconClear:true,onClickButton:function(){CommonPageScript.createDialog('deptDialog');},inputEvents:{}" /> -->
                </div>
                <input type="hidden" id="pId" name="pId"/>
            </li>
            <li style="width:750px;">
                <label>是否跳转:</label>
                <input type="radio" name="radio" checked="checked" />是
                <input type="radio" name="radio" />否
            </li>
            <li>
                <label>外部链接:</label>
                <input type="text" class="base-input" style="width:750px;" />
            </li>
            <li>
                <label>文章内容:</label>
                <textarea id="container" style="width:98%;height:400px;"></textarea>
            </li>
        </ul>
    </div>

    <div id="addAdDialogBtn">
        <center>
            <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-filesavewin8'" onClick="$.messager.alert('提示','发布成功！','info');">发布</a>
            <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-closeWin8'" onClick="$('#addAdDialog').dialog('close')">关闭</a>
        </center>
    </div>
</div>

<script>
    ;(function($,window, PageObject){

        // 页面初始化
        PageObject.init = function(){
            // 初始化webuploader
            var uploader = WebUploader.create({
                // 选完文件后是否自动上传
                auto: true,
                swf: '../../resources/plugins/webuploader/Uploader.swf',
                // 文件接收服务器
                server: '../../file/upload',
                // 选择文件的按钮
                // 内部根据运行时创建，可能是input，也可能是flash
                pick: {
                    id: '#filePicker',
                    multiple: false
                },
                // 只允许选择图片
                accept: {
                    title: 'Images',
                    extensions: 'jpg,png',
                    mimeTypes: 'image/*'
                }
            });
            uploader.on('fileQueued',function(file){
                var $li = $(
                    '<div id="' + file.id + '" style="overflow: hidden;height: 100px;width: 100px;position: relative;margin-bottom: 6px;" class="file-item thumbnail">' +
                        '<img style="position: absolute;" onload="javascript:imgResize(100,100,this)">' +
                    '</div>'
                    );
                $img = $li.find('img');
                // $list为容器jQuery实例
                $list = $('#fileList');
                $list.empty().append( $li );
                // 创建缩略图
                // 如果为非图片文件，可以不用调用此方法。
                // thumbnailWidth x thumbnailHeight 为 100 x 100
                uploader.makeThumb( file, function( error, src ) {
                    if ( error ) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }

                    $img.attr( 'src', src );
                }, 100, 100 );
            });
            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            uploader.on( 'uploadSuccess', function( file, response) {
                // $( '#'+file.id ).addClass('upload-state-done');
                var $li = $('#'+file.id),
                    $success = $li.find('div.success');

                if(!$success.length) {
                  $success = $('<div class="success"></div>').appendTo($li);
                }
                $success.text('上传成功');
                $('#pId').attr('value',response.data.id);
            });

            // 文件上传失败，显示上传出错。
            uploader.on( 'uploadError', function( file ) {
                var $li = $( '#'+file.id ),
                    $error = $li.find('div.error');

                // 避免重复创建
                if ( !$error.length ) {
                    $error = $('<div class="error"></div>').appendTo( $li );
                }

                $error.text('上传失败');
            });


            // 初始化编辑器
            var editor = new UE.ui.Editor();
            editor.render("container");
        };

        // 格式化datagrid(修改最后一列数据为详情)
        PageObject.gameUserFormatter = function (value, row, rowIndex) {
            return "<a href='javascript:void(0);' style='color:blue;margin-left:10px;' onclick='$(\"#addAdDialog\").dialog(\"open\");'>编辑</a><a href='javascript:void(0);' style='color:blue;margin-left:10px;' onclick=''>停用</a><a href='javascript:void(0);' style='color:blue;margin-left:10px;' onclick='PageObject.gameUserDetail();'>删除</a>";
        };

        PageObject.init();

    })(jQuery,window, window.PageObject = {});

</script>